<template>
  <el-row class="tac">
    <el-col :span="24">
      <h2>商品分类</h2>
      <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
        <li v-for="i in categoryList" :key="i.id" @click="toSearch(i.id)" class="infinite-list-item">{{ i.type }}</li>
      </ul>
    </el-col>
  </el-row>
</template>

<script>
import {goodsTypeRestful} from '@/api/goods-type'

export default {
  data() {
    return {
      categoryList: [],
      paginationQuery: {
        currentPage: 1,
        pageSize: 10
      },
    }
  },
  created() {
    this.fetchCategories()
  },
  methods: {
    load() {
      this.paginationQuery.currentPage++
      this.fetchCategories()
    },
    fetchCategories() {
      goodsTypeRestful.fetchAll().then(({data}) => {
        this.categoryList = data;
      })
    },
    // 向search搜索路由进行跳转
    toSearch(typeId) {
      this.$router.push({
        name: "search",
        query: {
          goodsType: typeId || undefined,
        },
      });
      this.$forceUpdate();
    },
  },
}
</script>

<style lang="less" scoped>
.el-col {
  height: 100%;
  background-color: #fff;

  h2 {
    margin-top: 12px;
  }

  .infinite-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .infinite-list-item {
      width: 76px;
      height: 32px;
      color: #fff;
      background-color: #4a97fd;
      line-height: 32px;
      margin-top: 12px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
